<template>
  <div>
    <el-row>
      <el-col :span="3"> <p>高级查询</p></el-col>
    </el-row>

    <el-row>
      <el-col :span="5">
        <el-input
          v-model="search.name"
          placeholder="用户名/真是姓名"
        ></el-input>
      </el-col>
      <el-col :span="5">
       <el-select v-model="search.type" placeholder="请选择充值方式">
      <el-option label="手动充值" value="手动充值"></el-option>
      <el-option label="快捷充值" value="快捷充值"></el-option>
    </el-select>
      </el-col>
      <el-col :span="3"> <p>充值金额起/终</p></el-col>
      <el-col :span="5">
      
        <el-input-number v-model="search.input1" placeholder="最小金额"></el-input-number>
        <el-input-number v-model="search.input2" placeholder="最大金额"></el-input-number>
      </el-col>

      <el-date-picker
        v-model="search.dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="dateFormat"
      >
      </el-date-picker>
    </el-row>

    <div class="d2">
      <el-col :span="12">
        <el-button
          class="btn1"
          type="success"
          icon="el-icon-search"
          @click="select()"
          >查询</el-button
        ></el-col
      >
    </div>

    <!-- 表格 -->
    <el-row>
      <el-table
        ref="multipleTable"
        :data="rechargeList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="编号" width="100" prop="pid"> </el-table-column>
        <el-table-column prop="no" label="流水号" width="100">
        </el-table-column>
        <el-table-column prop="uname" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="真实姓名" width="100">
        </el-table-column>
        <el-table-column prop="money" label="充值金额" width="100">
        </el-table-column>
        <el-table-column prop="amountmoney" label="到账金额" width="100">
        </el-table-column>
        <el-table-column prop="handling" label="手续费" width="100">
        </el-table-column>
        <el-table-column prop="type" label="充值类型"> </el-table-column>
        <el-table-column prop="state" label="充值状态"> </el-table-column>

        <el-table-column prop="time" label="充值时间"> </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10]"
        :page-size="size"
        layout="prev, pager, next, jumper, total, sizes"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      size: 5,
      rechargeList: [],
      total: 0,
      totalPage: 0,
      search: {
        type:'',
        page: 1,
        size: 5,
        name: '',
        input1: null,
        input2: null,
        dateRange: '',
        startDate:'',
        endDate:''
      },
       rechargeOptions: [
        { value: '手动充值', label: '手动充值' },
        { value: '快速充值', label: '快速充值' }
      ],
      value: "",
    };
  },
  mounted() {
    this.searchData();
  },
  methods: {
    dateFormat(picker) {
      /* 法一 */
      this.search.startDate = picker[0];
      this.search.endDate = picker[1];
      /* 法二 */
      // let startDate = this.params.date.toString()
      // this.params.startTime = startDate.substring(0, 10)
      // this.params.endTime = startDate.substring(11)
    },
    searchData() {
      this.$axios
        .post("/recharge/findAll/" + this.page + "/" + this.size)
        .then((res) => {
          let resPage = res.data.data;

          this.page = resPage.curPage;
          this.total = resPage.total;
          this.totalPage = resPage.totalPage;
          this.rechargeList = resPage.data;
        });
    },
    handleSizeChange(val) {
      this.size = val;
      this.searchData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.searchData();
    },
    select() {
      const params = {
        ...this.search,
        page: this.page,
        size: this.size
      };
      this.$axios.post("/recharge/findByCondition", this.search).then((res) => {
        this.rechargeList = res.data.data.data;
        // this.search.page = res.data.data.curPage;
        this.total = res.data.data.total;
      });
    },
  },
};
</script>
<style scoped>
.d2 {
  min-width: 100%;
  height: 40px;

  display: flex;
  justify-content: flex-end;
}
</style>